//
//  SocialMediaDetailView.swift
//  CMB250716
//
//  Created by Trae AI on 2025/01/15.
//

import SwiftUI
import Foundation

struct SocialMediaDetailView: View {
    @EnvironmentObject var dataManager: DataManager
    @EnvironmentObject var socialMediaManager: SocialMediaManager
    @Environment(\.presentationMode) var presentationMode
    
    let user: User
    
    @State private var selectedPlatform: SocialPlatform?
    @State private var selectedInteractionType: InteractionType?
    @State private var submissionDescription = ""
    @State private var submissionLink = ""
    @State private var selectedImage: UIImage?
    @State private var showingImagePicker = false
    @State private var showingSubmissionAlert = false
    @State private var submissionAlertMessage = ""
    @State private var submissionType: SubmissionType = .link
    @State private var showingRulesSheet = false
    @State private var hasUserReadRules = false
    
    enum SubmissionType {
        case link
        case image
    }
    
    private var language: String {
        return dataManager.currentLanguage
    }
    
    var body: some View {
        ZStack {
            // 背景渐变
            LinearGradient(
                colors: [
                    Color(red: 0.05, green: 0.05, blue: 0.1),
                    Color(red: 0.1, green: 0.1, blue: 0.15),
                    Color(red: 0.08, green: 0.08, blue: 0.12)
                ],
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
            .ignoresSafeArea()
            
            VStack(spacing: 0) {
                // 顶部导航栏
                topNavigationBar
                
                ScrollView {
                    VStack(spacing: 24) {
                        // 互动记录区域
                        interactionRecordsSection
                        
                        // 平台选择区域
                        platformSelectionSection
                        
                        // 提交表单区域
                        // 互动类型选择区域（始终显示）
                        interactionTypeSelectionSection
                        
                        // 提交表单区域（始终显示）
                        submissionFormSection
                    }
                    .padding(.horizontal, 20)
                    .padding(.bottom, 30)
                }
            }
        }
        .alert(isPresented: $showingSubmissionAlert) {
            Alert(
                title: Text(language == "zh" ? "提交状态" : "Submission Status"),
                message: Text(submissionAlertMessage),
                dismissButton: .default(Text(language == "zh" ? "确定" : "OK"))
            )
        }
        .sheet(isPresented: $showingImagePicker) {
            ImagePicker { image in
                handleImageSelection(image: image)
            }
        }
        .fullScreenCover(isPresented: $showingRulesSheet) {
            SocialMediaRulesView(userId: user.id.uuidString) {
                hasUserReadRules = true
            }
            .environmentObject(dataManager)
            .environmentObject(socialMediaManager)
        }
        .onAppear {
            hasUserReadRules = socialMediaManager.hasUserReadRules(userId: user.id.uuidString)
        }
        .navigationBarHidden(true)
    }
    
    // MARK: - 顶部导航栏
    private var topNavigationBar: some View {
        HStack {
            Button(action: {
                presentationMode.wrappedValue.dismiss()
            }) {
                Image(systemName: "chevron.left")
                    .font(.system(size: 18, weight: .medium))
                    .foregroundColor(Color(red: 1.0, green: 0.6, blue: 0.2))
            }
            
            Spacer()
            
            Text(language == "zh" ? "社交互动中心" : "Social Media Center")
                .font(.system(size: 20, weight: .bold))
                .foregroundColor(.white)
            
            Spacer()
            
            Button(language == "zh" ? "完成" : "Done") {
                presentationMode.wrappedValue.dismiss()
            }
            .foregroundColor(Color(red: 1.0, green: 0.6, blue: 0.2))
        }
        .padding(.horizontal, 20)
        .padding(.top, 8)
        .padding(.bottom, 16)
    }
    
    // MARK: - 互动记录区域
    private var interactionRecordsSection: some View {
        let userSubmissions = socialMediaManager.getUserSubmissions(userId: user.id.uuidString)
        let pointsStats = socialMediaManager.getUserPointsStats(userId: user.id.uuidString)
        let monthlyPoints = pointsStats.monthly
        let dailyPoints = pointsStats.daily
        
        return VStack(spacing: 20) {
            // 标题
            HStack {
                Text(language == "zh" ? "互动审核记录" : "Interaction Records")
                    .font(.system(size: 18, weight: .bold, design: .rounded))
                    .foregroundStyle(
                        LinearGradient(
                            colors: [Color(red: 0.0, green: 0.8, blue: 1.0), Color(red: 0.4, green: 0.6, blue: 1.0)],
                            startPoint: .leading,
                            endPoint: .trailing
                        )
                    )
                
                Spacer()
                
                // 勾选图标和查看规则按钮组合
                HStack(spacing: 12) {
                    // 勾选图标（仅显示状态，无点击功能）
                    Image(systemName: hasUserReadRules ? "checkmark.square.fill" : "square")
                        .font(.system(size: 20, weight: .medium))
                        .foregroundColor(hasUserReadRules ? Color(red: 0.0, green: 0.8, blue: 1.0) : .white.opacity(0.6))
                        .animation(.easeInOut(duration: 0.3), value: hasUserReadRules)
                    
                    // 查看规则按钮
                    Button(action: {
                        showingRulesSheet = true
                    }) {
                        Text(language == "zh" ? "查看规则" : "View Rules")
                            .font(.system(size: 14, weight: .semibold))
                            .foregroundColor(.white)
                            .padding(.horizontal, 16)
                            .padding(.vertical, 8)
                            .background(
                                RoundedRectangle(cornerRadius: 12)
                                    .fill(
                                        LinearGradient(
                                            colors: [
                                                Color(red: 0.0, green: 0.8, blue: 1.0).opacity(0.8),
                                                Color(red: 0.4, green: 0.6, blue: 1.0).opacity(0.9),
                                                Color(red: 0.0, green: 0.8, blue: 1.0)
                                            ],
                                            startPoint: .topLeading,
                                            endPoint: .bottomTrailing
                                        )
                                    )
                                    .shadow(color: Color(red: 0.0, green: 0.8, blue: 1.0).opacity(0.3), radius: 8, x: 0, y: 4)
                                    .overlay(
                                        RoundedRectangle(cornerRadius: 12)
                                            .stroke(
                                                LinearGradient(
                                                    colors: [Color.white.opacity(0.3), Color.clear],
                                                    startPoint: .topLeading,
                                                    endPoint: .bottomTrailing
                                                ),
                                                lineWidth: 1
                                            )
                                    )
                            )
                    }
                    .scaleEffect(1.0)
                    .animation(.easeInOut(duration: 0.2), value: hasUserReadRules)
                }
            }
            
            // 积分统计
            HStack(spacing: 15) {
                // 今日积分
                VStack(spacing: 8) {
                    Text("\(dailyPoints)")
                        .font(.system(size: 28, weight: .bold))
                        .foregroundColor(Color(red: 0.0, green: 0.8, blue: 1.0))
                    Text(language == "zh" ? "今日积分" : "Daily Points")
                        .font(.system(size: 12, weight: .medium))
                        .foregroundColor(.white.opacity(0.7))
                    Text("/ \(SocialMediaConfig.dailyPointsLimit)")
                        .font(.system(size: 10, weight: .medium))
                        .foregroundColor(.white.opacity(0.5))
                }
                .frame(maxWidth: .infinity)
                .padding(.vertical, 16)
                .background(
                    RoundedRectangle(cornerRadius: 12)
                        .fill(
                            LinearGradient(
                                colors: [
                                    Color(red: 0.05, green: 0.15, blue: 0.25),
                                    Color(red: 0.1, green: 0.2, blue: 0.3)
                                ],
                                startPoint: .topLeading,
                                endPoint: .bottomTrailing
                            )
                        )
                )
                
                // 本月积分
                VStack(spacing: 8) {
                    Text("\(monthlyPoints)")
                        .font(.system(size: 28, weight: .bold))
                        .foregroundColor(Color(red: 0.8, green: 0.4, blue: 1.0))
                    Text(language == "zh" ? "本月积分" : "Monthly Points")
                        .font(.system(size: 12, weight: .medium))
                        .foregroundColor(.white.opacity(0.7))
                    Text("/ \(SocialMediaConfig.monthlyPointsLimit)")
                        .font(.system(size: 10, weight: .medium))
                        .foregroundColor(.white.opacity(0.5))
                }
                .frame(maxWidth: .infinity)
                .padding(.vertical, 16)
                .background(
                    RoundedRectangle(cornerRadius: 12)
                        .fill(
                            LinearGradient(
                                colors: [
                                    Color(red: 0.15, green: 0.05, blue: 0.25),
                                    Color(red: 0.2, green: 0.1, blue: 0.3)
                                ],
                                startPoint: .topLeading,
                                endPoint: .bottomTrailing
                            )
                        )
                )
            }
            
            // 提交记录列表
            if userSubmissions.isEmpty {
                VStack(spacing: 12) {
                    Image(systemName: "doc.text")
                        .font(.system(size: 40))
                        .foregroundColor(.white.opacity(0.3))
                    Text(language == "zh" ? "暂无提交记录" : "No submissions yet")
                        .font(.system(size: 16, weight: .medium))
                        .foregroundColor(.white.opacity(0.6))
                    Text(language == "zh" ? "开始您的第一次社交互动提交吧！" : "Start your first social media submission!")
                        .font(.system(size: 14))
                        .foregroundColor(.white.opacity(0.5))
                        .multilineTextAlignment(.center)
                }
                .frame(maxWidth: .infinity)
                .padding(.vertical, 40)
            } else {
                LazyVStack(spacing: 12) {
                    ForEach(userSubmissions.prefix(5), id: \.id) { submission in
                        submissionRecordCard(submission: submission)
                    }
                    
                    if userSubmissions.count > 5 {
                        Text(language == "zh" ? "显示最近5条记录" : "Showing recent 5 records")
                            .font(.system(size: 12))
                            .foregroundColor(.white.opacity(0.5))
                            .padding(.top, 8)
                    }
                }
            }
        }
        .padding(24)
        .background(
            RoundedRectangle(cornerRadius: 20)
                .fill(
                    LinearGradient(
                        colors: [
                            Color(red: 0.05, green: 0.05, blue: 0.15),
                            Color(red: 0.1, green: 0.1, blue: 0.25),
                            Color(red: 0.05, green: 0.05, blue: 0.20)
                        ],
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    )
                )
        )
    }
    
    // MARK: - 平台选择区域
    private var platformSelectionSection: some View {
        VStack(spacing: 20) {
            // 标题
            HStack {
                Text(language == "zh" ? "选择社交平台" : "Select Social Platform")
                    .font(.system(size: 20, weight: .bold, design: .rounded))
                    .foregroundStyle(
                        LinearGradient(
                            colors: [Color(red: 0.0, green: 0.8, blue: 1.0), Color(red: 0.4, green: 0.6, blue: 1.0)],
                            startPoint: .leading,
                            endPoint: .trailing
                        )
                    )
                
                Spacer()
            }
            
            // 平台按钮网格
            LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 12), count: 3), spacing: 12) {
                socialPlatformButton(platform: "TikTok", icon: "music.note", color: Color.white)
                socialPlatformButton(platform: "Google", icon: "star.fill", color: Color(red: 0.26, green: 0.52, blue: 0.96))
                socialPlatformButton(platform: "Facebook", icon: "f.circle.fill", color: Color(red: 0.24, green: 0.35, blue: 0.60))
                socialPlatformButton(platform: "Instagram", icon: "camera.fill", color: Color(red: 0.83, green: 0.32, blue: 0.55))
                socialPlatformButton(platform: "小红书", icon: "book.fill", color: Color(red: 0.93, green: 0.26, blue: 0.26))
                socialPlatformButton(platform: "其他", icon: "network", color: Color(red: 0.5, green: 0.5, blue: 0.5))
            }
        }
        .padding(24)
        .background(
            RoundedRectangle(cornerRadius: 20)
                .fill(
                    LinearGradient(
                        colors: [
                            Color(red: 0.05, green: 0.05, blue: 0.15),
                            Color(red: 0.1, green: 0.1, blue: 0.25),
                            Color(red: 0.05, green: 0.05, blue: 0.20)
                        ],
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    )
                )
        )
    }
    
    // MARK: - 互动类型选择区域
    private var interactionTypeSelectionSection: some View {
        VStack(spacing: 20) {
            // 标题
            HStack {
                VStack(alignment: .leading, spacing: 4) {
                    Text(language == "zh" ? "选择互动类型" : "Select Interaction Type")
                        .font(.system(size: 20, weight: .bold, design: .rounded))
                        .foregroundStyle(
                            LinearGradient(
                                colors: [Color(red: 0.0, green: 0.8, blue: 1.0), Color(red: 0.4, green: 0.6, blue: 1.0)],
                                startPoint: .leading,
                                endPoint: .trailing
                            )
                        )
                    
                    Text(language == "zh" ? "选择您的互动行为类型" : "Choose your interaction behavior type")
                        .font(.system(size: 13, weight: .medium))
                        .foregroundColor(.white.opacity(0.8))
                }
                
                Spacer()
            }
            
            // 互动类型选择
            VStack(spacing: 12) {
                ForEach([InteractionType.like, InteractionType.share, InteractionType.original], id: \.self) { interactionType in
                    interactionTypeButton(interactionType: interactionType)
                }
            }
        }
        .padding(24)
        .background(
            RoundedRectangle(cornerRadius: 20)
                .fill(
                    LinearGradient(
                        colors: [
                            Color(red: 0.05, green: 0.05, blue: 0.15),
                            Color(red: 0.1, green: 0.1, blue: 0.25),
                            Color(red: 0.05, green: 0.05, blue: 0.20)
                        ],
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    )
                )
        )
    }
    
    // MARK: - 提交表单区域
    private var submissionFormSection: some View {
        VStack(spacing: 20) {
            // 标题
            HStack {
                VStack(alignment: .leading, spacing: 4) {
                    Text(language == "zh" ? "提交互动内容" : "Submit Interaction Content")
                        .font(.system(size: 20, weight: .bold, design: .rounded))
                        .foregroundStyle(
                            LinearGradient(
                                colors: [Color(red: 0.0, green: 0.8, blue: 1.0), Color(red: 0.4, green: 0.6, blue: 1.0)],
                                startPoint: .leading,
                                endPoint: .trailing
                            )
                        )
                    
                    if let platform = selectedPlatform, let interactionType = selectedInteractionType {
                        Text(language == "zh" ? "平台：\(platform.localizedName(language: language))" : "Platform: \(platform.localizedName(language: language))")
                            .font(.system(size: 13, weight: .medium))
                            .foregroundColor(.white.opacity(0.8))
                        Text(language == "zh" ? "类型：\(interactionType.localizedName(language: language)) (+\(interactionType.points)积分)" : "Type: \(interactionType.localizedName(language: language)) (+\(interactionType.points) points)")
                            .font(.system(size: 13, weight: .medium))
                            .foregroundColor(interactionType.color)
                    }
                }
                
                Spacer()
            }
            
            // 提交类型选择
            HStack(spacing: 16) {
                Button(action: {
                    submissionType = .link
                }) {
                    HStack(spacing: 8) {
                        Image(systemName: submissionType == .link ? "checkmark.circle.fill" : "circle")
                            .foregroundColor(submissionType == .link ? Color(red: 0.0, green: 0.8, blue: 1.0) : .white.opacity(0.5))
                        Text(language == "zh" ? "链接" : "Link")
                            .foregroundColor(.white)
                    }
                }
                
                Button(action: {
                    submissionType = .image
                }) {
                    HStack(spacing: 8) {
                        Image(systemName: submissionType == .image ? "checkmark.circle.fill" : "circle")
                            .foregroundColor(submissionType == .image ? Color(red: 0.0, green: 0.8, blue: 1.0) : .white.opacity(0.5))
                        Text(language == "zh" ? "图片" : "Image")
                            .foregroundColor(.white)
                    }
                }
                
                Spacer()
            }
            
            // 输入区域
            if submissionType == .link {
                VStack(alignment: .leading, spacing: 8) {
                    Text(language == "zh" ? "分享链接" : "Share Link")
                        .font(.system(size: 14, weight: .medium))
                        .foregroundColor(.white.opacity(0.8))
                    
                    TextField(language == "zh" ? "请输入分享链接" : "Enter share link", text: $submissionLink)
                        .textFieldStyle(PlainTextFieldStyle())
                        .padding(12)
                        .background(
                            RoundedRectangle(cornerRadius: 8)
                                .fill(Color.white.opacity(0.1))
                        )
                        .foregroundColor(.white)
                }
            } else {
                VStack(alignment: .leading, spacing: 8) {
                    Text(language == "zh" ? "上传图片" : "Upload Image")
                        .font(.system(size: 14, weight: .medium))
                        .foregroundColor(.white.opacity(0.8))
                    
                    Button(action: {
                        showingImagePicker = true
                    }) {
                        if let image = selectedImage {
                            Image(uiImage: image)
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                                .frame(height: 120)
                                .clipped()
                                .cornerRadius(8)
                        } else {
                            VStack(spacing: 8) {
                                Image(systemName: "photo.badge.plus")
                                    .font(.system(size: 24))
                                    .foregroundColor(.white.opacity(0.6))
                                Text(language == "zh" ? "点击选择图片" : "Tap to select image")
                                    .font(.system(size: 14))
                                    .foregroundColor(.white.opacity(0.6))
                            }
                            .frame(height: 120)
                            .frame(maxWidth: .infinity)
                            .background(
                                RoundedRectangle(cornerRadius: 8)
                                    .fill(Color.white.opacity(0.1))
                            )
                        }
                    }
                }
            }
            
            // 描述输入
            VStack(alignment: .leading, spacing: 8) {
                Text(language == "zh" ? "描述（可选）" : "Description (Optional)")
                    .font(.system(size: 14, weight: .medium))
                    .foregroundColor(.white.opacity(0.8))
                
                TextField(language == "zh" ? "请描述您的互动内容..." : "Describe your interaction content...", text: $submissionDescription, axis: .vertical)
                    .textFieldStyle(PlainTextFieldStyle())
                    .padding(12)
                    .frame(minHeight: 80)
                    .background(
                        RoundedRectangle(cornerRadius: 8)
                            .fill(Color.white.opacity(0.1))
                    )
                    .foregroundColor(.white)
            }
            
            // 提交按钮
            Button(action: {
                submitEvidence()
            }) {
                HStack {
                    Image(systemName: "paperplane.fill")
                        .font(.system(size: 16, weight: .medium))
                    Text(language == "zh" ? "提交" : "Submit")
                        .font(.system(size: 16, weight: .semibold))
                }
                .foregroundColor(.white)
                .frame(maxWidth: .infinity)
                .padding(.vertical, 16)
                .background(
                    LinearGradient(
                        colors: [
                            Color(red: 0.0, green: 0.8, blue: 1.0),
                            Color(red: 0.4, green: 0.6, blue: 1.0)
                        ],
                        startPoint: .leading,
                        endPoint: .trailing
                    )
                )
                .cornerRadius(12)
            }
            .disabled(!canSubmit())
            .opacity(canSubmit() ? 1.0 : 0.6)
        }
        .padding(24)
        .background(
            RoundedRectangle(cornerRadius: 20)
                .fill(
                    LinearGradient(
                        colors: [
                            Color(red: 0.05, green: 0.05, blue: 0.15),
                            Color(red: 0.1, green: 0.1, blue: 0.25),
                            Color(red: 0.05, green: 0.05, blue: 0.20)
                        ],
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    )
                )
        )
    }
    
    // MARK: - 辅助函数
    
    private func socialPlatformButton(platform: String, icon: String, color: Color) -> some View {
        let platformEnum = convertStringToPlatform(platform)
        let isSelected = selectedPlatform == platformEnum
        let canSubmitResult = socialMediaManager.canSubmit(userId: user.id.uuidString)
        let canSubmitToPlatform = canSubmitResult.success
        
        return Button(action: {
            selectedPlatform = platformEnum
            // 清空之前的输入
            submissionDescription = ""
            submissionLink = ""
            selectedImage = nil
        }) {
            VStack(spacing: 10) {
                ZStack {
                    // 外层阴影圆圈
                    Circle()
                        .fill(
                            RadialGradient(
                                colors: [color.opacity(0.3), color.opacity(0.1), Color.clear],
                                center: .center,
                                startRadius: 20,
                                endRadius: 35
                            )
                        )
                        .frame(width: 60, height: 60)
                        .blur(radius: 2)
                    
                    // 主圆圈背景
                    Circle()
                        .fill(
                            LinearGradient(
                                colors: isSelected ? [
                                    Color(red: 0.0, green: 0.8, blue: 1.0).opacity(0.9),
                                    Color(red: 0.4, green: 0.6, blue: 1.0).opacity(0.7),
                                    Color(red: 0.0, green: 0.8, blue: 1.0)
                                ] : [
                                    color.opacity(0.8),
                                    color.opacity(0.6),
                                    color.opacity(0.9)
                                ],
                                startPoint: .topLeading,
                                endPoint: .bottomTrailing
                            )
                        )
                        .frame(width: 52, height: 52)
                        .shadow(color: isSelected ? Color(red: 0.0, green: 0.8, blue: 1.0).opacity(0.5) : color.opacity(0.4), radius: 8, x: 0, y: 4)
                        .overlay(
                            Circle()
                                .stroke(
                                    LinearGradient(
                                        colors: [Color.white.opacity(0.6), Color.clear, Color.white.opacity(0.3)],
                                        startPoint: .topLeading,
                                        endPoint: .bottomTrailing
                                    ),
                                    lineWidth: 2
                                )
                        )
                        .overlay(
                            Circle()
                                .fill(
                                    RadialGradient(
                                        colors: [Color.white.opacity(0.3), Color.clear],
                                        center: UnitPoint(x: 0.3, y: 0.3),
                                        startRadius: 5,
                                        endRadius: 25
                                    )
                                )
                        )
                    
                    // 图标
                    Image(systemName: icon)
                        .font(.system(size: 26, weight: .semibold))
                        .foregroundStyle(
                            LinearGradient(
                                colors: [Color.white, Color.white.opacity(0.9)],
                                startPoint: .topLeading,
                                endPoint: .bottomTrailing
                            )
                        )
                        .shadow(color: Color.black.opacity(0.3), radius: 2, x: 0, y: 1)
                }
                
                Text(platform)
                    .font(.system(size: 13, weight: .semibold))
                    .foregroundStyle(
                        LinearGradient(
                            colors: isSelected ? [Color(red: 0.0, green: 0.8, blue: 1.0), Color(red: 0.4, green: 0.6, blue: 1.0)] : [Color.white, Color.white.opacity(0.9)],
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing
                        )
                    )
                    .multilineTextAlignment(.center)
                    .shadow(color: Color.black.opacity(0.3), radius: 1, x: 0, y: 1)
                    .lineLimit(1)
                
                if !canSubmitToPlatform {
                    Text(language == "zh" ? "今日已达上限" : "Daily limit reached")
                        .font(.system(size: 10, weight: .medium))
                        .foregroundColor(.red.opacity(0.8))
                        .lineLimit(1)
                        .padding(.horizontal, 6)
                        .padding(.vertical, 2)
                        .background(
                            RoundedRectangle(cornerRadius: 4)
                                .fill(Color.red.opacity(0.2))
                        )
                }
            }
            .frame(maxWidth: .infinity)
            .padding(.vertical, 18)
            .background(
                RoundedRectangle(cornerRadius: 20)
                    .fill(
                        isSelected ?
                        LinearGradient(
                            colors: [
                                Color(red: 0.0, green: 0.8, blue: 1.0).opacity(0.4),
                                Color(red: 0.4, green: 0.6, blue: 1.0).opacity(0.3),
                                Color(red: 0.0, green: 0.8, blue: 1.0).opacity(0.5)
                            ],
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing
                        ) :
                        LinearGradient(
                            colors: [
                                Color.white.opacity(0.15),
                                Color.white.opacity(0.08),
                                Color.white.opacity(0.12)
                            ],
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing
                        )
                    )
                    .shadow(
                        color: isSelected ? 
                            Color(red: 0.0, green: 0.8, blue: 1.0).opacity(0.4) : 
                            Color.black.opacity(0.2),
                        radius: isSelected ? 12 : 6,
                        x: 0,
                        y: isSelected ? 6 : 3
                    )
                    .overlay(
                        RoundedRectangle(cornerRadius: 20)
                            .stroke(
                                isSelected ?
                                LinearGradient(
                                    colors: [
                                        Color(red: 0.0, green: 0.8, blue: 1.0).opacity(0.8),
                                        Color(red: 0.4, green: 0.6, blue: 1.0).opacity(0.6),
                                        Color(red: 0.0, green: 0.8, blue: 1.0)
                                    ],
                                    startPoint: .topLeading,
                                    endPoint: .bottomTrailing
                                ) :
                                LinearGradient(
                                    colors: [Color.white.opacity(0.3), Color.white.opacity(0.1)],
                                    startPoint: .topLeading,
                                    endPoint: .bottomTrailing
                                ),
                                lineWidth: isSelected ? 2.5 : 1.5
                            )
                    )
                    .overlay(
                        RoundedRectangle(cornerRadius: 20)
                            .fill(
                                LinearGradient(
                                    colors: [Color.white.opacity(0.2), Color.clear],
                                    startPoint: .topLeading,
                                    endPoint: .center
                                )
                            )
                    )
            )
        }
        .scaleEffect(isSelected ? 1.08 : 1.0)
        .animation(.spring(response: 0.3, dampingFraction: 0.7, blendDuration: 0.2), value: isSelected)
        .disabled(!canSubmitToPlatform)
        .opacity(canSubmitToPlatform ? 1.0 : 0.6)
    }
    
    // MARK: - 互动类型按钮
    private func interactionTypeButton(interactionType: InteractionType) -> some View {
        Button(action: {
            selectedInteractionType = interactionType
        }) {
            HStack(spacing: 12) {
                // 选择指示器
                Image(systemName: selectedInteractionType == interactionType ? "checkmark.circle.fill" : "circle")
                    .font(.system(size: 20, weight: .medium))
                    .foregroundColor(selectedInteractionType == interactionType ? Color(red: 0.0, green: 0.8, blue: 1.0) : .white.opacity(0.3))
                
                // 图标
                Image(systemName: interactionType.icon)
                    .font(.system(size: 18, weight: .medium))
                    .foregroundColor(interactionType.color)
                    .frame(width: 24, height: 24)
                
                // 文本信息
                VStack(alignment: .leading, spacing: 2) {
                    Text(interactionType.localizedName(language: language))
                        .font(.system(size: 16, weight: .semibold))
                        .foregroundColor(.white)
                    Text(interactionType.localizedDescription(language: language))
                        .font(.system(size: 12, weight: .medium))
                        .foregroundColor(.white.opacity(0.7))
                }
                
                Spacer()
                
                // 积分显示
                VStack(spacing: 2) {
                    Text("+\(interactionType.points)")
                        .font(.system(size: 16, weight: .bold))
                        .foregroundColor(interactionType.color)
                    Text(language == "zh" ? "积分" : "pts")
                        .font(.system(size: 10, weight: .medium))
                        .foregroundColor(.white.opacity(0.6))
                }
            }
            .padding(16)
            .background(
                RoundedRectangle(cornerRadius: 12)
                    .fill(
                        selectedInteractionType == interactionType ?
                        LinearGradient(
                            colors: [
                                interactionType.color.opacity(0.2),
                                interactionType.color.opacity(0.1)
                            ],
                            startPoint: .leading,
                            endPoint: .trailing
                        ) :
                        LinearGradient(
                            colors: [
                                Color.white.opacity(0.05),
                                Color.white.opacity(0.02)
                            ],
                            startPoint: .leading,
                            endPoint: .trailing
                        )
                    )
                    .overlay(
                        RoundedRectangle(cornerRadius: 12)
                            .stroke(
                                selectedInteractionType == interactionType ?
                                interactionType.color.opacity(0.5) :
                                Color.white.opacity(0.1),
                                lineWidth: selectedInteractionType == interactionType ? 2 : 1
                            )
                    )
            )
        }
        .buttonStyle(PlainButtonStyle())
    }
    
    private func submissionRecordCard(submission: SocialMediaSubmission) -> some View {
        HStack(spacing: 12) {
            // 平台图标
            ZStack {
                Circle()
                    .fill(
                        RadialGradient(
                            colors: [Color(red: 0.0, green: 0.8, blue: 1.0).opacity(0.3), Color.clear],
                            center: .center,
                            startRadius: 0,
                            endRadius: 20
                        )
                    )
                    .frame(width: 40, height: 40)
                
                Image(systemName: platformIcon(for: convertStringToPlatform(submission.platform)))
                    .font(.system(size: 16, weight: .medium))
                    .foregroundColor(Color(red: 0.0, green: 0.8, blue: 1.0))
            }
            
            VStack(alignment: .leading, spacing: 4) {
                HStack {
                    Text(convertStringToPlatform(submission.platform).localizedName(language: language))
                        .font(.system(size: 14, weight: .semibold))
                        .foregroundColor(.white)
                    
                    Spacer()
                    
                    VStack(alignment: .trailing, spacing: 2) {
                        Text(submission.interactionType.localizedName(language: language))
                            .font(.system(size: 12, weight: .medium))
                            .foregroundColor(submission.interactionType.color)
                        Text("+\(submission.pointsAwarded) " + (language == "zh" ? "积分" : "pts"))
                            .font(.system(size: 12, weight: .bold))
                            .foregroundColor(Color(red: 0.0, green: 0.8, blue: 1.0))
                    }
                }
                
                Text(submission.description)
                    .font(.system(size: 12))
                    .foregroundColor(.white.opacity(0.7))
                    .lineLimit(2)
                
                HStack {
                    Text(formatDate(submission.submissionDate))
                        .font(.system(size: 10))
                        .foregroundColor(.white.opacity(0.5))
                    
                    Spacer()
                    
                    Text(statusText(for: submission.status))
                        .font(.system(size: 10, weight: .medium))
                        .foregroundColor(statusColor(for: submission.status))
                        .padding(.horizontal, 8)
                        .padding(.vertical, 2)
                        .background(
                            RoundedRectangle(cornerRadius: 4)
                                .fill(statusColor(for: submission.status).opacity(0.2))
                        )
                }
            }
        }
        .padding(12)
        .background(
            RoundedRectangle(cornerRadius: 12)
                .fill(Color.white.opacity(0.05))
        )
    }
    
    private func convertStringToPlatform(_ platformString: String) -> SocialPlatform {
        switch platformString {
        case "TikTok":
            return .tiktok
        case "Google":
            return .google
        case "Facebook":
            return .facebook
        case "Instagram":
            return .instagram
        case "小红书":
            return .xiaohongshu
        case "其他":
            return .others
        case "微博":
            return .weibo
        case "微信":
            return .wechat
        case "抖音":
            return .douyin
        case "Twitter":
            return .twitter
        default:
            return .weibo
        }
    }
    
    private func platformIcon(for platform: SocialPlatform) -> String {
        switch platform {
        case .weibo: return "w.circle.fill"
        case .wechat: return "message.fill"
        case .douyin: return "music.note"
        case .xiaohongshu: return "book.fill"
        case .instagram: return "camera.fill"
        case .facebook: return "f.circle.fill"
        case .twitter: return "bird.fill"
        case .tiktok: return "music.note"
        case .youtube: return "play.rectangle.fill"
        case .google: return "star.fill"
        case .others: return "network"
        }
    }
    
    private func canSubmit() -> Bool {
        guard selectedPlatform != nil else { return false }
        guard selectedInteractionType != nil else { return false }
        
        if submissionType == .link {
            return !submissionLink.isEmpty
        } else {
            return selectedImage != nil
        }
    }
    
    private func submitEvidence() {
        guard let platform = selectedPlatform,
              let interactionType = selectedInteractionType else { return }
        
        var evidenceURL = ""
        
        if submissionType == .link {
            evidenceURL = submissionLink
        } else {
            if selectedImage == nil {
                showSubmissionAlert(message: language == "zh" ? "请选择图片" : "Please select an image")
                return
            }
            // 这里应该上传图片并获取URL，暂时使用占位符
            evidenceURL = "image_placeholder_\(Date().timeIntervalSince1970)"
        }
        
        let result = socialMediaManager.submitEvidence(
            userId: user.id.uuidString,
            platform: platform.rawValue,
            interactionType: interactionType,
            description: submissionDescription,
            link: submissionType == .link ? evidenceURL : nil,
            imageData: submissionType == .image ? selectedImage?.jpegData(compressionQuality: 0.8) : nil,
            language: language
        )
        
        if result.success {
            showSubmissionAlert(message: language == "zh" ? 
                "提交成功！等待审核中..." : 
                "Submission successful! Awaiting review...")
            
            // 清空表单
            submissionDescription = ""
            submissionLink = ""
            selectedImage = nil
            selectedPlatform = nil
            selectedInteractionType = nil
        } else {
            showSubmissionAlert(message: result.message)
        }
    }
    
    private func handleImageSelection(image: UIImage) {
        selectedImage = image
    }
    
    private func showSubmissionAlert(message: String) {
        submissionAlertMessage = message
        showingSubmissionAlert = true
    }
    
    private func formatDate(_ date: Date) -> String {
        let formatter = DateFormatter()
        formatter.dateFormat = "MM/dd HH:mm"
        return formatter.string(from: date)
    }
    
    private func statusText(for status: SubmissionStatus) -> String {
        switch status {
        case .pending:
            return language == "zh" ? "审核中" : "Pending"
        case .approved:
            return language == "zh" ? "已通过" : "Approved"
        case .rejected:
            return language == "zh" ? "已拒绝" : "Rejected"
        }
    }
    
    private func statusColor(for status: SubmissionStatus) -> Color {
        switch status {
        case .pending:
            return Color.orange
        case .approved:
            return Color.green
        case .rejected:
            return Color.red
        }
    }
}

#Preview {
    SocialMediaDetailView(user: User(
        phoneNumber: "1234567890",
        name: "testuser",
        email: "test@example.com"
    ))
    .environmentObject(DataManager.shared)
    .environmentObject(SocialMediaManager())
}